<!--
- Kit: Shadcn UI
- Component: Dialog
- Code:
```twig
<twig:Dialog id="delete_account">
    <twig:Dialog:Trigger>
        <twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
    </twig:Dialog:Trigger>
    <twig:Dialog:Content>
        <twig:Dialog:Header>
            <twig:Dialog:Title>Are you absolutely sure?</twig:Dialog:Title>
            <twig:Dialog:Description>
                This action cannot be undone. This will permanently delete your account
                and remove your data from our servers.
            </twig:Dialog:Description>
        </twig:Dialog:Header>
    </twig:Dialog:Content>
</twig:Dialog>
```
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
<div data-controller="dialog" aria-labelledby="dialog-delete_account-title" aria-describedby="dialog-delete_account-description">
    <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;dialog#open" data-dialog-target="trigger" aria-haspopup="dialog">Open</button>
        <dialog id="dialog-delete_account" class="bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 " data-dialog-target="dialog" data-action="keydown.esc-&gt;dialog#close:prevent click-&gt;dialog#closeOnClickOutside"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="dialog-delete_account-title" class="text-lg leading-none font-semibold ">Are you absolutely sure?</h2>
            <p id="dialog-delete_account-description" class="text-muted-foreground text-sm ">This action cannot be undone. This will permanently delete your account
                and remove your data from our servers.
            </p>
        </header>
            <button type="button" class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4" data-action="click-&gt;dialog#close">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"></path></svg>
            <span class="sr-only">Close</span>
        </button>
    </dialog>
</div>